<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="dashboard">
  <link rel="stylesheet" href="./assets/common.css">
  <title>dash board</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="../build/g2.js"></script>
  <script>
    const Shape = G2.Shape;
      // 自定义Shape 部分
    Shape.registerShape('point', 'dashBoard', {
      drawShape(cfg, group) {
        const origin = cfg.origin; // 原始数据
        const value = origin.value;
        let point = cfg.points[0]; // 获取第一个标记点
        point = this.parsePoint({ // 将标记点转换到画布坐标
          x: point.x,
          y: 0.95
        });
        const center = this.parsePoint({ // 获取极坐标系下画布中心点
          x: 0,
          y: 0
        });
        const r = 20;
        const ra = 0.8 * r;
        const X1 = center.x;
        const Y1 = center.y;
        const X2 = point.x;
        const Y2 = point.y;
        const B = 150 / 180;
        let Xa,
          Xb,
          Xc,
          Ya,
          Yb,
          Yc,
          A; // 绘制小箭头需要的三个点
        if (Y1 === Y2) {
          if (X1 > X2) {
            Xa = X2 + Math.cos(B) * ra;
            Ya = Y2 - Math.sin(B) * ra;
            Xb = X2 + Math.cos(B) * ra;
            Yb = Y2 + Math.sin(B) * ra;
            Xc = X2 + 2 * ra;
            Yc = Y2;
          } else {
            Xa = X2 - Math.cos(B) * ra;
            Ya = Y2 - Math.sin(B) * ra;
            Xb = X2 - Math.cos(B) * ra;
            Yb = Y2 + Math.sin(B) * ra;
            Xc = X2 - 2 * ra;
            Yc = Y2;
          }
        } else if (Y1 > Y2) {
          A = Math.atan((X1 - X2) / (Y1 - Y2));
          Xa = X2 + ra * Math.sin(A + B);
          Ya = Y2 + ra * Math.cos(A + B);
          Xb = X2 + ra * Math.sin(A - B);
          Yb = Y2 + ra * Math.cos(A - B);
          Xc = X2 + 2 * ra * Math.sin(A);
          Yc = Y2 + 2 * ra * Math.cos(A);
        } else {
          if (X1 > X2) {
            A = Math.atan((Y2 - Y1) / (X1 - X2));
            Xa = X2 + ra * Math.cos(A + B);
            Ya = Y2 - ra * Math.sin(A + B);
            Xb = X2 + ra * Math.cos(A - B);
            Yb = Y2 - ra * Math.sin(A - B);
            Xc = X2 + 2 * ra * Math.cos(A);
            Yc = Y2 - 2 * ra * Math.sin(A);
          } else {
            A = Math.atan((Y2 - Y1) / (X2 - X1));
            Xa = X2 - ra * Math.cos(A - B);
            Ya = Y2 - ra * Math.sin(A - B);
            Xb = X2 - ra * Math.cos(A + B);
            Yb = Y2 - ra * Math.sin(A + B);
            Xc = X2 - 2 * ra * Math.cos(A);
            Yc = Y2 - 2 * ra * Math.sin(A);
          }
        }
        const shape = group.addShape('circle', {
          attrs: {
            x: X2,
            y: Y2,
            r,
            fill: cfg.color
          }
        });
        group.addShape('circle', {
          attrs: {
            x: X2,
            y: Y2,
            r: r / 2,
            fill: 'white'
          }
        });
      // 添加文本1
        group.addShape('text', {
          attrs: {
            x: X1,
            y: Y1 - 25,
            text: '当前收益率',
            fontSize: 18,
            fill: '#CCCCCC',
            textAlign: 'center'
          }
        });
      // 添加文本2
        group.addShape('text', {
          attrs: {
            x: X1,
            y: Y1 + 25,
            text: value,
            fontSize: 18,
            fill: '#F75B5B',
            textAlign: 'center'
          }
        });
        group.addShape('polygon', {
          attrs: {
            points: [
            [ Xa, Ya ],
            [ Xc, Yc ],
            [ Xb, Yb ],
            [ Xa, Ya ]
            ],
            fill: cfg.color
          }
        });
        return shape;
      }
    });
      // G2 语法部分
    const color = [ '#18B7D6', '#EFCF6E', '#E47668' ];
    const chart = new G2.Chart({
      container: 'canvas',
      width: 500,
      height: 450
    });

    chart.source(creatData());
    chart.coord('polar', {
      startAngle: -9 / 8 * Math.PI,
      endAngle: 1 / 8 * Math.PI
    });
    chart.scale('value', {
      min: 0,
      max: 0.15,
      tickInterval: 0.075
    });
    chart.axis('value', {
      line: null,
      grid: null
    });
    chart.point({
      generatePoints: true
    }).position('value*1')
      .shape('dashBoard')
      .color('value', function(v) { // 根据值的大小确定标记的颜色
        let rst;
        if (v < 0.05) {
          rst = color[0];
        } else if (v < 0.1) {
          rst = color[1];
        } else {
          rst = color[2];
        }
        return rst;
      });
    chart.legend(false);
    draw(creatData());
    setInterval(function() {
      draw(creatData());
    }, 1000);
    function draw(data) {
      const val = data[0].value;
      const lineWidth = 30;
      chart.guide().clear();
      chart.guide().arc({
        start: [ 0, 0.95 ],
        end: [ 0.15, 0.95 ],
        style: { // 底灰色
          stroke: '#CCCCCC',
          lineWidth
        }
      });
      if (val > 0.05) {
        chart.guide().arc({
          start: [ 0, 0.95 ],
          end: [ 0.05, 0.95 ],
          style: { // 低收益率
            stroke: color[0],
            lineWidth
          }
        });
      }
      if (val > 0.1) {
        chart.guide().arc({
          start: [ 0.05, 0.95 ],
          end: [ 0.1, 0.95 ],
          style: { // 中收益率
            stroke: color[1],
            lineWidth
          }
        });
      }
      if (val > 0 && val <= 0.05) {
        chart.guide().arc({
          start: [ 0, 0.95 ],
          end: [ val, 0.95 ],
          style: { // 低收益率
            stroke: color[0],
            lineWidth
          }
        });
      }
      if (val > 0.05 && val <= 0.1) {
        chart.guide().arc({
          start: [ 0.05, 0.95 ],
          end: [ val, 0.95 ],
          style: { // 中收益率
            stroke: color[1],
            lineWidth
          }
        });
      }
      if (val > 0.1 && val <= 0.15) {
        chart.guide().arc({
          start: [ 0.1, 0.95 ],
          end: [ val, 0.95 ],
          style: { // 中收益率
            stroke: color[2],
            lineWidth
          }
        });
      }
      chart.changeData(data);
    }
    function creatData() {
      const data = [];
      let val = Math.random() * 0.15;
      val = val.toFixed(3);
      data.push({ value: Number(val) });
      return data;
    }

  </script>
</body>
</html>